/*每个页面必须的最外层盒子必须添加该样式*/
.app-container {
  padding: 20px;
}
/* 基础宽度 */
.app-width{
  margin-left: auto;
  margin-right: auto;
}

/*文本超出不换行*/
.text-nowrap {
  white-space: nowrap;
}

/* 2行文本溢出打点 */
.text-hidden-2 {
  -webkit-line-clamp: 2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

/*文本自动换行*/
.text-break-word {
  word-wrap: break-word;
  word-break: normal;
}

/*文本超出截取并加 ...*/
.text-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 文本下划线 */
.text-underline {
  text-decoration: underline;
}

/* 鼠标小手光标 */
.pointer {
  cursor: pointer;
}

/* 鼠标默认光标 */
.cursor-default {
  cursor: default;
}

/*flex:start*/
.d-none {
  display: none;
}

.d-block {
  display: block;
}

.d-flex {
  display: flex;
}

.j-start {
  justify-content: flex-start;
}

.j-end {
  justify-content: flex-end;
}

.j-center {
  justify-content: center;
}

.j-between {
  justify-content: space-between;
}

.j-around {
  justify-content: space-around;
}

.a-start {
  align-items: flex-start;
}

.a-end {
  align-items: flex-end;
}

.a-center {
  align-items: center;
}

.flex-center {
  display: flex;
  align-items: center;
}

.flex-center-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  flex-direction: column;
}

.flex1 {
  flex: 1;
}

/*flex:end*/
/*margin:start*/
.m-0 {
  margin: 0;
}

.m {
  margin: 5px;
}

.m-1 {
  margin: 10px;
}

.m-2 {
  margin: 20px;
}

.m-3 {
  margin: 30px;
}

.m-4 {
  margin: 40px;
}

.mx-0 {
  margin-left: 0;
  margin-right: 0;
}

.mx {
  margin-left: 5px;
  margin-right: 5px;
}

.mx-1 {
  margin-left: 10px;
  margin-right: 10px;
}

.mx-2 {
  margin-left: 20px;
  margin-right: 20px;
}

.mx-3 {
  margin-left: 30px;
  margin-right: 30px;
}

.mx-4 {
  margin-left: 40px;
  margin-right: 40px;
}

.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.my {
  margin-top: 5px;
  margin-bottom: 5px;
}

.my-1 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.my-2 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.my-3 {
  margin-top: 30px;
  margin-bottom: 30px;
}

.my-4 {
  margin-top: 40px;
  margin-bottom: 40px;
}

.mt-0 {
  margin-top: 0;
}

.mt {
  margin-top: 5px;
}

.mt-1 {
  margin-top: 10px;
}

.mt-2 {
  margin-top: 20px;
}

.mt-3 {
  margin-top: 30px;
}

.mt-4 {
  margin-top: 40px;
}

.mb-0 {
  margin-bottom: 0;
}

.mb {
  margin-bottom: 5px;
}

.mb-1 {
  margin-bottom: 10px;
}

.mb-2 {
  margin-bottom: 20px;
}

.mb-3 {
  margin-bottom: 30px;
}

.mb-4 {
  margin-bottom: 40px;
}

.ml-0 {
  margin-left: 0;
}

.ml {
  margin-left: 5px;
}

.ml-1 {
  margin-left: 10px;
}

.ml-2 {
  margin-left: 20px;
}

.ml-3 {
  margin-left: 30px;
}

.ml-4 {
  margin-left: 40px;
}

.mr-0 {
  margin-right: 0;
}

.mr {
  margin-right: 5px;
}

.mr-1 {
  margin-right: 10px;
}

.mr-2 {
  margin-right: 20px;
}

.mr-3 {
  margin-right: 30px;
}

.mr-4 {
  margin-right: 40px;
}

/*margin:end*/
/*padding:start*/
.p-0 {
  padding: 0;
}

.p {
  padding: 5px;
}

.p-1 {
  padding: 10px;
}

.p-2 {
  padding: 20px;
}

.p-3 {
  padding: 30px;
}

.px-0 {
  padding-left: 0;
  padding-right: 0;
}

.px {
  padding-left: 5px;
  padding-right: 5px;
}

.px-1 {
  padding-left: 10px;
  padding-right: 10px;
}

.px-2 {
  padding-left: 20px;
  padding-right: 20px;
}

.px-3 {
  padding-left: 30px;
  padding-right: 30px;
}

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.py {
  padding-top: 5px;
  padding-bottom: 5px;
}

.py-1 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.py-2 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.py-3 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.pt-0 {
  padding-top: 0;
}

.pt {
  padding-top: 5px;
}

.pt-1 {
  padding-top: 10px;
}

.pt-2 {
  padding-top: 20px;
}

.pt-3 {
  padding-top: 30px;
}

.pb-0 {
  padding-bottom: 0;
}

.pb {
  padding-bottom: 5px;
}

.pb-1 {
  padding-bottom: 10px;
}

.pb-2 {
  padding-bottom: 20px;
}

.pb-3 {
  padding-bottom: 30px;
}

.pl-0 {
  padding-left: 0;
}

.pl {
  padding-left: 5px;
}

.pl-1 {
  padding-left: 10px;
}

.pl-2 {
  padding-left: 20px;
}

.pl-3 {
  padding-left: 30px;
}

.pr-0 {
  padding-right: 0;
}

.pr {
  padding-right: 5px;
}

.pr-1 {
  padding-right: 10px;
}

.pr-2 {
  padding-right: 20px;
}

.pr-3 {
  padding-right: 30px;
}

/*padding:end*/

.border-radius {
  border-radius: 4px;
}

.border-radius-50 {
  border-radius: 50%;
}

.w-100 {
  width: 100% !important;
}

.w-50 {
  width: 50% !important;
}

.h-100 {
  height: 100% !important;
}
